<template>
  <div class="company-detail">
    <div class="company-banner">
        <img src="http://files.wabei.cn/img/banner.png" alt="">
    </div>
    <div class="company-introduction clearfix">
        <div class="fl">
            <h2>{{company.stockName}}<span>（{{company.stockCode}}）</span></h2>
            <div>
              {{company.introduction}}
            </div>
            <div class="lable">
                <button v-for="(item,key) in company.tags" :key="key">
                    {{item}}
                </button>
            </div>
        </div>
    </div>
    <div class="person clearfix">
        <div class="zhengshu fl" v-for="(item,key) in prizeList" :key="key">
          <div class="company-img">
            <img :src="item.ceoImage" v-if="item.ceoImage && item.projectID==1" alt="">
            <img :src="item.projectImage" v-else-if="item.projectImage && item.projectID!=1" alt="">
            <img v-else style="margin-top:-20px;" src="http://files.wabei.cn/img/touxiang.png" alt="">
          </div>
            <div class="to-vote">
              <div class="rate">
                  <p>排名</p>
                  <p class="rate-number">
                    {{item.ranking}}
                  </p>
              </div>
              <div class="qiye-type">
                {{item.projectName}}
              </div>
              <div class="vote-number">
                <span>投票数:<span class="red">{{item.votes}}</span></span>
                <span @click="toVote(item.projectID,key,item.pollID)">投票</span>
              </div>
            </div>
        </div>
    </div>
    <div class="comment">
      <button class="contact-btn" @click="showContact">
        联系企业
      </button>
    </div>
    <div >
      <!-- 联系企业弹框 -->
      <x-dialog v-model="show" class="dialog-demo" dialog-transition="dialogTransition">
          <div class="img-box contact-company">
            <div class="vux-modal-header">
              <span class="vux-close-btn" @click="show=false">×</span>
            </div>
            <div class="info-form">
                <p>如实填写信息，我们稍后为您推荐企业</p>
              <group  label-margin-right="2em" label-align="left">
                <x-input placeholder="姓名" v-model="formVal.Name"></x-input>
                <x-input placeholder="职位" v-model="formVal.Duty"></x-input>
                <x-input placeholder="公司" v-model="formVal.Company"></x-input>
                <x-input placeholder="手机号码" v-model="formVal.Cellphone"></x-input>
                <x-input placeholder="微信/QQ" v-model="formVal.WxQQ"></x-input>
                <x-input placeholder="需求" v-model="formVal.Request"></x-input>
                <x-button  type="primary" button-primary-bg-color="red" @click.native="submit()">提交</x-button>
              </group>
            </div>
          </div>
      </x-dialog>
    </div>
  </div>
</template>
<script>
import { XDialog, Group, XInput, XButton, XTextarea } from "vux";
export default {
  name: "companyDetail",
  components: {
    XDialog,
    Group,
    XInput,
    XButton,
    XTextarea
  },
  data() {
    return {
      show: false,
      rate: 0,
      formVal: {
        Name: "",
        Duty: "",
        Company: "",
        Cellphone: "",
        WxQQ: "",
        Request: "",
        StockCode: ""
      },
      company: {
        stockName: "",
        stockCode: "",
        introduction: "",
        tags: []
      },
      prizeList: []
    };
  },
  methods: {
    submit() {
      var that = this;
      if (!that.formVal.Name) {
        that.$vux.toast.text("请输入姓名！", "middle");
        return;
      }
      if (!that.formVal.Company) {
        that.$vux.toast.text("请输入公司名称！", "middle");
        return;
      }
      if (!that.formVal.Cellphone) {
        that.$vux.toast.text("请输入手机号码！", "middle");
        return;
      }
      if (!/^1(1|2|3|4|5|6|7|8|9)\d{9}$/.test(that.formVal.Cellphone)) {
        that.$vux.toast.text("手机号码格式有误，请重填！", "middle");
        return;
      }
      if (!that.formVal.Request) {
        that.$vux.toast.text("请输入需求！", "middle");
        return;
      }
      that.formVal.StockCode = that.prizeList[0].stockCode;
      that.$ajax
        .put(that.commenPath + "/vote/contact", that.formVal)
        .then(function(res) {
          var data = res.data;
          if (data.code == 0) {
            that.$vux.toast.text("提交成功！", "middle");
            that.show = false;
          } else {
            that.$vux.toast.text(data.message, "middle");
          }
        })
        .catch(function(res) {
          console.log(res);
        });
    },
    showContact() {
      var that = this;
      for (var key in that.formVal) {
        that.formVal[key] = "";
      }
      that.show = true;
    },
   
    loadCompanyDetail() {
      var that = this;
      var idx = this.$route.query.code;
      that.$ajax
        .get(that.commenPath + "/vote/polls/0/" + idx + "/details")
        .then(function(res) {
          if (res.data.code == 0) {
            var data = res.data;
            that.company = data.data[0];
            that.company.tags =
              data.data[0].tags.length > 0 && data.data[0].tags.split(",");
            if (data.data.length == 2) {
              if (data.data[0].projectID == 1) {
                that.prizeList = [data.data[1], data.data[0]];
              } else {
                that.prizeList = [data.data[0], data.data[1]];
              }
              //加载分享到微信
              that.shareWx();
            } else {
              that.prizeList = data.data;
            }
            //处理董事长名称
          } else {
            that.$vux.toast.text(data.message, "middle");
          }
        });
    },
    toVote(idx, k1,pollID) {
      //奖项编号
      if (!idx) {
        return;
      }
      var that = this;
      this.$ajax
        .post(
          that.commenPath +
            "/vote/vote/" +pollID+
            "/" +that.getCookie("accesskey")
        )
        .then(function(res) {
          var data = res.data;
          if (data.code == 0) {
            // if()
           if(data.data!=0){
							that.$vux.toast.text("投票成功,今天还可投"+data.data+"票", 'middle')
						}else{
							that.$vux.toast.text("投票成功,今天的票数已经投完啦！", 'middle')
						}
            that.prizeList[k1].votes++;
          } else {
            that.$vux.toast.text(data.message, "middle");
          }
        })
        .catch(function() {
          that.$vux.toast.text("出错啦", "middle");
        });
    },
    shareWx(nameAndCode){
       var url =  "http://vote.wabei.cn/index.html?code="+this.$route.query.code;
      var that=this
      this.$ajax.get(that.commenPath + "/vote/sign/"+url)
      .then(function (res) {
        var data = res.data
        if (data.code == 0) {
          //微信分享功能
          var wxShare = new WxShare({
            share_title: "请投我一票："+that.company.stockName+"("+that.company.stockCode+")"+"正在参与挖贝新三板年终评选",
            share_url: url,
            share_desc: "2022挖贝网北交所·新三板年终评选正在进行，阁下的一票很重要！",
            share_imgurl: "http://files.wabei.cn/img/logo.png",
            appId: "wx031005fc43335c2b",
            timestamp: "1414587457",
            nonceStr: "psKNy1oqeud0v",
            signature: data.data
          });
          wxShare.init();
        }
      })
      .catch(function (res) {

      })
    }
  },
  created() {
    this.loadCompanyDetail(); //加载公司详情
  },
  mounted() {
    this.$router.afterEach((to, from, next) => {
      window.scrollTo(0, 0);
    });
  }
};
</script>
<style scoped lang="scss">
.company-detail {
  background: url("http://files.wabei.cn/img/bg.jpg");
  background-repeat:no-repeat;
  background-size:cover; 
  .company-banner {
    width: 100%;
    text-align: center;
    padding-top: 27px;
    img {
      width: 50%;
    }
  }
  .person {
    margin-top: 56px;
    padding: 32px;
    &.fl {
      padding-left: 0px !important;
    }
  }
  .zhengshu {
    width: 50%;
    height: 455px;
    padding-left: 10px;
    .company-img {
      background-color: #fff;
      width: 100%;
      height: 310px;
      border-radius: 10px 10px 0 0;
      overflow: hidden;
      text-align: center;
      img {
        width: 100%;
        background-color: #fff;
      }
    }
    .to-vote {
      height: 147px;
      background-color: #fcda96;
      padding: 0 10px;
      border-radius: 0 0 10px 10px;
      .rate {
        width: 55px;
        height: 70px;
        display: inline-block;
        background-color: #fef7de;
        text-align: center;
        font-size: 13px;
        vertical-align: middle;
        p {
          margin: 0px;
          &:first-child {
            margin-top: 10px;
          }
        }
        .rate-number {
          color: #ff6b36;
        }
      }
      .qiye-type {
        display: inline-block;
        font-size: 28px;
        color: #3d2305;
      }
      .vote-number {
        width: 100%;
        height: 48px;
        line-height: 48px;
        margin-top: 20px;
        font-size: 26px;
        > span {
          width: 60%;
          float: left;
          height: 48px;
          line-height: 48px;
          background-color: #fff;
          font-size: 16px;
          color: #9c9c9c;
          text-align: left;
          .red {
            color: #fe4e4b;
          }
          &:first-child {
            border-radius: 12px 0 0 12px;
          }
          &:last-child {
            border-radius: 0 12px 12px 0;
            width: 40%;
            background: linear-gradient(to bottom, #f77b4c, #fe4e4b);
            color: #fff;
            font-size: 32px;
            text-align: center;
          }
        }
      }
    }
  }
  .company-introduction {
    border-top: 1px solid #4a496c;
    border-bottom: 1px solid #4a496c;
    padding: 38px 32px 14px;
    position: relative;
    > div {
      &.seperate-line {
        width: 1px;
        height: 455px;
        background-color: #4a496c;
        position: absolute;
        left: calc(50% - 10px);
      }
      &.fl {
        width: 100%;
        margin-bottom: 40px;
        h2 {
          color: #efbb55;
          font-weight: 700;
          font-size: 32px;
          span {
            font-size: 24px;
            color: #d3d2db;
          }
        }
        > div {
          font-size: 26px;
          line-height: 32px;
          color: #d3d2db;
          margin-top: 24px;
          padding-right: 10px;
          &.lable {
            padding-right: 0px;
            width: 70%;
            button {
              padding: 0px;
              margin: 0px;
              background-image: linear-gradient(
                to left,
                rgba(255, 255, 255, 0.9) 10%,
                rgba(255, 255, 255, 0.9) 20%,
                rgba(255, 255, 255, 0.9) 80%,
                #fecd7c 100%
              );
              width: calc((100% - 30px) / 3);
              height: 40px;
              line-height: 40px;
              text-align: center;
              font-size: 16px;
              margin-right: 10px;
              color: #6a6a67;
            }
          }
        }
      }
    }
  }
  .comment {
    padding: 104px 32px 200px;
    button {
      width: 100%;
      margin-bottom: 25px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      color: #ffffff;
      font-size: 32px;
      border-radius: 16px;
      &.comment-btn {
        background: linear-gradient(180deg, #f77b4c, #fe4e4b);
      }
      &.contact-btn {
        background: linear-gradient(180deg, #5fb7f7, #2f90fe);
      }
    }
  }
}
.img-box {
  height: 900px;
  background-color: #eee;
  &.rate-company {
    height: 430px;
    .info-form {
      margin-left: 44px;
      margin-right: 44px;
      > div {
        margin-top: 35px;
        > p {
          margin-bottom: 0px;
          color: #a0a0a0;
          font-size: 25px;
        }
      }
      x-button {
        margin-top: 48px;
      }
    }
  }
  .vux-modal-header {
    text-align: right;
    padding-right: 30px;
    height: 70px;
    line-height: 70px;
    .vux-close-btn {
      display: inline-block;
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 40px;
      text-align: center;
      z-index: 9999;
    }
  }
  .info-form {
    > div {
      margin: 30px 46px 0px;
    }
    p {
      font-size: 30px;
      color: #b5b5b6;
    }
  }
}
</style>



